<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../../include/laypublic.jsp" %>
<%@ include file="../../include/vueComponent.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>营销策划详情</title>
</head>
<link rel="stylesheet" href="${ctx}/resources/vue-element-lib/detail.css">
<body>
<div id="app">
    <div class="layui-tab layui-tab-brief" lay-filter="xqxx-tab-all">
        <ul class="layui-tab-title">
            <li id="tbglId" class="layui-this" lay-id="0">营销策划详情</li>
            <li id="zgysId" lay-id="1">历史审批信息</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">

                <div class="container">
                    <el-form ref="formRef" label-width="140px" label-suffix="："
                             label-position="left">
                        <%--项目基础信息--%>
                        <div class="title">
                            <h3>项目基础信息</h3>
                        </div>
                        <el-row>
                            <x-col>
                                <el-form-item label="项目名称">
                                    <span>{{projectInfo.proName}}</span>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="项目编码">
                                    <span>{{projectInfo.proCode}}</span>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="项目业态">
                                    <span>{{projectInfo.proFormat}}</span>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="策划书编码">
                                    <span>{{projectInfo.id}}</span>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="所属公司">
                                    <span>{{projectInfo.compName}}</span>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="营销经理">
                                    <span>{{projectInfo.staffName}}</span>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <el-row>
                            <x-col>
                                <el-form-item label="政府内部评审阶段">
                                    <x-input v-model="proSell.internalReviewStage" name="政府内部评审阶段"/>
                                </el-form-item>
                            </x-col>

                        </el-row>
                        <%--营销班子--%>
                        <div class="title">
                            <h3>营销班子</h3>
                        </div>
                        <div class="unit">

                            <div class="unit_center">
                                <el-table :data="marketingTeamTableData" style="width: 100%" border>
                                    <el-table-column label="姓名" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.name" filterable placeholder="请选择"
                                                       @change="selPersonnel($event,scope.$index)"
                                                       remote :remote-method="remoteMethod">
                                                <el-option v-for="item in personnel" :key="item.id"
                                                           :label="item.staffName"
                                                           :value="item.id"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="职务" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.position" :disabled="true"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="备注" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.remarks" placeholder="请输入备注"></el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <%--业主信息--%>
                        <div class="title">
                            <h3>业主信息</h3>
                        </div>
                        <%--业主单位名称 单位性质 内部关系--%>
                        <el-row>
                            <x-col>
                                <el-form-item label="业主单位名称">
                                    <el-select v-model="proSell.ownerOrgSguid" filterable style="width: 100%"
                                               placeholder="请选择">
                                        <el-option v-for="item in owner" :key="item.id" :label="item.coopName"
                                                   :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="单位性质">
                                    <x-input v-model="proSell.orgNature" name="单位性质"/>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <%--内部关系--%>
                        <el-row>
                            <x-col>
                                <el-form-item label="内部关系">
                                    <x-input v-model="proSell.innerRelationship" name="内部关系"/>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <%--竞争对手分析--%>
                        <div class="title">
                            <h3>竞争对手分析</h3>
                        </div>
                        <div class="unit">

                            <div class="unit_center">
                                <el-table :data="opponentExplain" style="width: 100%" border>
                                    <el-table-column label="竞争对手名称" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.competitor" placeholder="竞争对手名称"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="基本情况" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.basic" placeholder="基本情况"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="优势" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.advantage" placeholder="优势"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="劣势" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.inferior" placeholder="劣势"></el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <%--自身分析--%>
                        <div class="title">
                            <h3>自身分析</h3>
                        </div>
                        <%-- 竞争优势--%>
                        <el-row>
                            <x-col position="full">
                                <el-form-item label="竞争优势">
                                    <x-input v-model="proSell.selfGoodness" type="textarea" :rows="4"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <%--竞争劣势--%>
                        <el-row>
                            <x-col position="full">
                                <el-form-item label="竞争劣势">
                                    <x-input v-model="proSell.selfRisk" type="textarea" :rows="4"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <%--营销策划--%>
                        <div class="title">
                            <h3>营销策划</h3>
                        </div>
                        <%--项目所处阶段--%>
                        <el-row>
                            <x-col position="full">
                                <el-form-item label="项目所处阶段">
                                    <span>{{proSell.proStage}}</span>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <%--工作目标--%>
                        <el-row>
                            <x-col position="full">
                                <el-form-item label="工作目标">
                                    <x-input v-model="proSell.pushOver" type="textarea" :rows="4"></x-input>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <div class="unit" style="margin-top: 30px">

                            <div class="unit_center">
                                <el-table :data="focusArr" style="width: 100%" border>
                                    <el-table-column label="重点" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.emphasis" placeholder="重点"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="工作现状" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.actuality" placeholder="工作现状"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="需总部支持的方面" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.support" placeholder="需总部支持的方面"></el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="unit">
                            <div class="unit_center">
                                <el-table :data="difficultyArr" style="width: 100%" border>
                                    <el-table-column label="难点" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.difficult" placeholder="难点"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="工作现状" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.actuality" placeholder="工作现状"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="需总部支持的方面" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.support" placeholder="需总部支持的方面"></el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="title">
                            <h3>预计营销费用</h3>
                        </div>
                        <el-row>
                            <x-col position="full">
                                <el-form-item label="营销费用总预算">
                                    <span>{{sumMarketingMoney||0}}</span>
                                </el-form-item>
                            </x-col>
                        </el-row>
                        <div class="unit">
                            <div class="unit_center">
                                <el-table :data="marketingList" style="width: 100%" border>
                                    <el-table-column label="费用类型" align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.types" filterable
                                                       placeholder="请选择费用类型"
                                                       @change="marketingListSel($event,scope.$index)">
                                                <el-option v-for="item in typesArr" :key="item.code" :label="item.name"
                                                           :value="item.code"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="费用金额" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.costMoney" type="number" min="0"
                                                      placeholder="费用金额"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="预计时间" align="center">
                                        <template slot-scope="scope">
                                            <el-date-picker v-model="scope.row.willOccurDate" type="date"
                                                            value-format="yyyy-MM-dd"
                                                            placeholder="选择日期"></el-date-picker>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="备注" align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.remarks" placeholder="备注"></el-input>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="title">
                            <h3>项目附件信息</h3>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:350px;">支持pdf、excel、word、图片资料，可上传多个</label>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">附件：（选填）</label>
                            <div class="layui-input-block">
                                <div class="layui-upload">
                                    <div class="layui-upload-list" id="9-upload-more-list">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
            <div class="layui-tab-item">
                <%@ include file="lay-processHistory-detail.jsp" %>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/resources/vue-element-lib/jquery.js"></script>
<script>
    var fileArr = [];
    <%--var id = "${id}";--%>
    var staticPath = '${fileHttpPre}';
    layui.config({
        base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set', 'upload', 'table', 'transfer', 'laydate', 'element', 'layer'], function () {
        var $ = layui.$
            , upload = layui.upload
            , table = layui.table
            , element = layui.element
            , layer = layui.layer;
    });

    //删除文件
    function del(index) {
        layui.$("#fileAtt_" + index).remove();
        layui.$("#upload_img_" + index).remove();
        fileArr.map((el, idx) => {
            if (el.split('|')[2] == index) {
                fileArr.splice(idx, 1)
            }
        })
    }

    //根据url查看文件
    function showImg(url) {
        var openWin = window.open(url, '', 'left=410,height=768, width=1024, top=200,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
    }

    /*核心*/
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                layId: '0',
                processId: '',
                procNodeList: [],
                tempNodeList: [],
                auditMsg: '',//审批意见


                proSell: {},
                projectInfo: {
                    proName: '',//项目名称
                    proCode: '',//项目编码
                    proFormat: '',//项目业态
                    compName: '',//所属公司
                    staffName: '',//营销经理
                },
                marketingTeamTableData: [],//营销班子  name 姓名 postion 职务 note 备注
                marketingList: [],//预计营销费用
                opponentExplain: [],//竞争对手
                focusArr: [],//重点
                difficultyArr: [],//难点
                owner: [],//业主单位
                sumMarketingMoney: 0,
                typesArr: [],//费用类型
                code: '',
                allPersonnel: [],//所有人员
                personnel: [],
            }
        },
        created() {
            let that = this;
            that.id = "${id}";
            that.code = "${proCode}";
            that.processId = "${processId}";
            that.queryCoopInfo();
            that.queryPersonnel();
            that.costTypes();
            // that.queryDetail()
            that.queryProcessList()
        },
        mounted() {

        },
        methods: {
            queryProcessList() {
                let that = this;
                $.ajax({
                    type: 'post',
                    url: basePath + '/historyProcess/proNodeDetail',  //请求数据接口
                    data: {processId: that.processId},
                    success: function (result) {
                        if (result.entity) {
                            that.procNodeList = result.entity.procNodeList;
                            that.tempNodeList = result.entity.tempNodeList;
                            that.projectInfo = result.entity.detailJson.projectInfo;
                            that.proSell = result.entity.detailJson.proSell;
                            that.marketingList = result.entity.detailJson.marketingList;
                            if (fileArr.length == 0) {
                                that.showFile(result.entity.detailJson.fileAtt);
                            }
                        }
                    }
                });
            },
            // 业主单位
            queryCoopInfo() {
                let that = this;
                $.ajax({
                    type: 'post',
                    url: basePath + '/proSell/queryCoopInfo',  //请求数据接口
                    data: {},
                    success: function (result) {
                        that.owner = result;
                    }
                });
            },
            showFile(fileList) {
                if (fileList && fileList.length > 0) {
                    fileArr = fileList;
                    for (let i in fileList) {
                        let contractInfo = fileList[i];
                        let arr = contractInfo.split("|");
                        let imgSrc = "";
                        let suffix = arr[1].substring(arr[1].lastIndexOf(".") + 1, arr[1].length);
                        if (suffix == 'jpg' || suffix == 'png') {
                            imgSrc = "${fileHttpPre}/" + arr[3];
                        } else {
                            imgSrc = "${ctx}/resources/images/" + suffix + ".jpg";
                        }
                        $('#' + arr[0] + '-upload-more-list')
                            .append('<div class="layui-upload-img-div" id="upload_img_' + arr[2] + '"><img src="' + imgSrc + '" title="'
                                + arr[1] + '" class="layui-upload-img"><div class="mask"><a href="javascript:void(0)" onclick="showImg(\'' + "${fileHttpPre}"
                                + arr[3] + '\');">查看</a><a href="javascript:void(0)" onclick="del(\''
                                + arr[2] + '\')";>删除</a></div><p>' + arr[1] + '</p><input type="hidden" value="'
                                + contractInfo + '" id="fileAtt_' + arr[2] + '" name="fileAtts" ></input></div> ');
                    }
                }
            },
            //获取所有人
            queryPersonnel() {
                let that = this;
                $.ajax({
                    type: 'post',
                    url: basePath + '/proSell/queryPersonnel',  //请求数据接口
                    data: {},
                    success: function (result) {
                        if (result && result.length > 0) {
                            that.allPersonnel = result;
                            that.personnel = result.splice(0, 50);
                            console.log(that.personnel)
                        }
                    }
                });
            },
            costTypes() {
                let that = this;
                $.ajax({
                    type: 'post',
                    url: basePath + '/proSell/costTypes',  //请求数据接口
                    data: {},
                    success: function (result) {
                        that.typesArr = result
                    }
                });
            },
        }
    })
</script>
</body>
</html>

